<!--
 * @Author: luoyong/471826078@qq.com
 * @Date: 2020-07-15 10:43:21
 * @LastEditors: zhangfan
 -->
<template>
  <div class="export">
    <!-- 弹窗 -->
    <el-dialog
      :title="excelTitle"
      :visible.sync="showExcel"
      width="716px"
      @close="closeExcel"
      :modal-append-to-body="false"
    >
      <div class="exportBoxMain" v-if="list.length == 17">
        <p class="title" @click="showBase = !showBase">
          <i class="el-icon-caret-bottom"></i> 项目基本信息
        </p>
        <div :class="showBase ? 'slider ' : 'slider closed '">
          <el-checkbox
            :label="item.label"
            v-model="item.isDefault"
            v-for="item in list1"
            :key="item.id"
          ></el-checkbox>
        </div>

        <p class="title" @click="showLink = !showLink">
          <i class="el-icon-caret-bottom"></i>联系方式
        </p>
        <div :class="showLink ? 'slider1 ' : 'slider1 closed1 '">
          <el-checkbox
            :label="item.label"
            v-model="item.isDefault"
            v-for="item in list2"
            :key="item.id"
          ></el-checkbox>
        </div>

        <p class="title"><i class="el-icon-caret-bottom"></i>项目数据统计</p>
        <el-checkbox
          :label="item.label"
          v-model="item.isDefault"
          v-for="item in list3"
          :key="item.id"
        ></el-checkbox>
      </div>
      <div class="exportBoxMain" v-else>
        <p class="title" @click="showBase = !showBase">
          <i class="el-icon-caret-bottom"></i> 项目基本信息
        </p>
        <div :class="showBase ? 'slider ' : 'slider closed '">
          <el-checkbox
            :label="item.label"
            v-model="item.isDefault"
            v-for="item in list4"
            :key="item.id"
          ></el-checkbox>
        </div>

        <p class="title" @click="showLink = !showLink">
          <i class="el-icon-caret-bottom"></i>联系方式
        </p>
        <div :class="showLink ? 'slider1 ' : 'slider1 closed1 '">
          <el-checkbox
            :label="item.label"
            v-model="item.isDefault"
            v-for="item in list5"
            :key="item.id"
          ></el-checkbox>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeExcel" class="cancel">关闭</el-button>
        <el-button
          v-sdc
          type="primary"
          @click.native="confirmExcel"
          class="save"
          >{{ btnValue }}</el-button
        >
      </div>
    </el-dialog>
    <!-- </div> -->
  </div>
</template>
<script>
export default {
  name: 'exportExcel',
  data() {
    return {
      checkStrictly: true,
      defaultArr: [],
      selectMenuId: [],
      list: this.colmnList,
      checkedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      btnValue: '导出',
      checkList: [],
      showBase: true,
      showLink: true,
    }
  },
  props: {
    excelTitle: {
      //导出单个表格时需传入 导出报表名称
      type: String,
      default: '导出报表',
    },
    showExcel: {
      type: Boolean,
      default: false,
      required: true,
    },
    colmnList: {
      type: Array,
      required: true,
    },
  },
  computed: {
    list1: function () {
      let arr = []
      this.list.forEach((item, index) => {
        if (index < 13 && index != 4) {
          arr.push(item)
        }
      })
      return arr
    },
    list2: function () {
      let arr = []
      this.list.forEach((item, index) => {
        if (index > 12) {
          arr.push(item)
        }
      })
      return arr
    },
    list3: function () {
      let arr = []
      this.list.forEach((item, index) => {
        if (index == 4) {
          arr.push(item)
        }
      })
      return arr
    },
    list4: function () {
      let arr = []
      this.list.forEach((item, index) => {
        if (index < 12) {
          arr.push(item)
        }
      })
      return arr
    },
    list5: function () {
      let arr = []
      this.list.forEach((item, index) => {
        if (index > 11) {
          arr.push(item)
        }
      })
      return arr
    },
  },
  methods: {
    closeExcel() {
      this.$emit('closeExcel', {})
    },

    getCheckedNode(arr) {
      this.defaultArr = []
      for (let item of arr) {
        if (item.isDefault) {
          this.defaultArr.push(item.id)
        }
        if (item.children) {
          this.getCheckedNode(item.children)
        }
      }
    },
    confirmExcel() {
      this.getCheckedNode(this.list)
      if (!this.defaultArr.length) {
        this.$message({
          type: 'warning',
          message: '导出字段为空!',
        })
      } else {
        this.$emit('getExportList', this.list)
      }
    },
  },
  watch: {
    colmnList(val) {
      this.list = val
      this.showBase = true
      this.showLink = true
      this.getCheckedNode(this.list)
    },
  },
  mounted() {
    this.getCheckedNode(this.colmnList)
  },
}
</script>
<style lang="less" scoped>
.export {
  &Box {
    position: relative;
    margin: 15vh auto;
    width: 716px;
    border-radius: 8px;
    background-color: #fff;
    /deep/.el-checkbox__label {
      &:hover {
        color: #009588 !important;
        text-decoration: underline;
      }
    }
    &Main {
      min-height: 100px;
      padding: 10px 0;
      min-height: 200px;
      max-height: 600px;
      overflow: auto;
      .title {
        height: 26px;
        line-height: 26px;
        padding-left: 30px;
        font-size: 14px;
        color: #666;
        cursor: pointer;
        i {
          width: 13px;
          color: #c0c4cc;
        }
        &:hover {
          background-color: #f5f7fa;
          color: #009588;
          text-decoration: underline;
          i {
            color: #c0c4cc;
          }
        }
      }
      .el-checkbox {
        margin: 0 30px;
        display: block;
        line-height: 26px;
        padding-left: 24px;
      }
      // .is-checked{
      //   background-color: #f1f2f4;
      // }
      &_title {
        display: flex;
        height: 50px;
        align-items: center;
      }
      .el-checkbox-group {
        margin-left: 50px;
      }
    }
  }
}
.el-button--primary.is-disabled {
  background-color: gray;
  border-color: gray;
}
/deep/ .el-dialog__body {
  padding: 5px 0;
}

.slider {
  overflow-y: hidden;
  max-height: 500px;
  /* 最大高度 */
  height: 312px;
  /*  Webkit内核浏览器：Safari and Chrome*/
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  /*  Mozilla内核浏览器：firefox3.5+*/
  -moz-transition-property: all;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  /*  Opera*/
  -o-transition-property: all;
  -o-transition-duration: 0.5s;
  -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  /*  IE9*/
  -ms-transition-property: all;
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider1 {
  overflow-y: hidden;
  max-height: 500px;
  /* 最大高度 */
  height: 105px;
  /*  Webkit内核浏览器：Safari and Chrome*/
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  /*  Mozilla内核浏览器：firefox3.5+*/
  -moz-transition-property: all;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  /*  Opera*/
  -o-transition-property: all;
  -o-transition-duration: 0.5s;
  -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  /*  IE9*/
  -ms-transition-property: all;
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.closed,
.closed1 {
  height: 0;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
</style>
